<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%	/*
		作用相当生成了以下路径：
		path=WebName ; (当前站点名称)
			例如：
				basePath= http://localhost:8080/WebName/

		这样的好处在于可以为当前jsp页面中的href添加前缀-->bssePath字符串
	*/
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Corona Admin</title>
    <!-- plugins:css -->
<%--    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />--%>

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .login-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 400px;
            padding: 30px;
        }
        .login-title {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }
        .login-tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }
        .login-tab {
            padding: 10px 20px;
            cursor: pointer;
            flex: 1;
            text-align: center;
        }
        .login-tab.active {
            border-bottom: 2px solid #4285f4;
            color: #4285f4;
            font-weight: bold;
        }
        .login-form {
            display: none;
        }
        .login-form.active {
            display: block;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .code-group {
            display: flex;
        }
        .code-group input {
            flex: 1;
            margin-right: 10px;
        }
        .code-group button {
            padding: 10px 15px;
            background-color: #4285f4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .code-group button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        .login-button {
            width: 100%;
            padding: 12px;
            background-color: #4285f4;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 10px;
        }
        .login-button:hover {
            background-color: #3367d6;
        }
        .error-message {
            color: #d32f2f;
            margin-top: 10px;
            text-align: center;
            display: none;
        }
    </style>
    <!-- End layout styles -->
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

<%--    <script type="text/javascript">--%>
<%--        $(function (){--%>
<%--            $("#registerBtn").click(function(){--%>
<%--                document.location.href = "/settings/qx/user/register.do";--%>
<%--            });--%>
<%--        });--%>
<%--    </script>--%>

</head>
<body>
<div class="login-container">
    <h2 class="login-title">用户登录</h2>

    <div class="login-tabs">
        <div class="login-tab active" data-tab="account">账号登录</div>
        <div class="login-tab" data-tab="email">邮箱登录</div>
        <div class="login-tab" data-tab="phone">短信登录</div>
    </div>

    <!-- 账号密码登录表单 -->
    <form id="account-form" class="login-form active">
        <div class="form-group">
            <label for="username">账号</label>
            <input type="text" id="username" name="username" placeholder="请输入账号">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" placeholder="请输入密码">
        </div>
        <div class="form-check">
            <label >
                <c:if test="${not empty cookie.loginAct and not empty cookie.loginPwd}">
                    <input type="checkbox" id="isRemPwd" checked>
                </c:if>
                <c:if test="${empty cookie.loginAct or empty cookie.loginPwd}">
                    <input type="checkbox" id="isRemPwd">
                </c:if>
                记住密码
            </label>
            &nbsp;&nbsp;
            <span id="msg1" style="color: red"></span>
        </div>
        <button type="button" id="Login" class="login-button" onclick="accountLogin()">登录</button>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            没有账号？
            <a href="settings/qx/user/register.do" style="text-decoration: none;color:blue;">注册</a></p>
        <div id="account-error" class="error-message"></div>
    </form>

    <!-- 邮箱验证码登录表单 -->
    <form id="email-form" class="login-form" method="post">
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
        </div>
        <div class="form-group">
            <label for="email-code">验证码</label>
            <div class="code-group">
                <input type="text" id="email-code" name="email-code" placeholder="请输入验证码">
                <button type="button" id="send-email-code" onclick="handleSendEmailCode(this, 60)">获取验证码</button>
                <p id="msg"></p>
            </div>
        </div>
        <button type="button" class="login-button" onclick="emailLogin()">登录</button>
        <div id="email-error" class="error-message"></div>
    </form>

    <!-- 短信验证码登录表单 -->
    <form id="phone-form" class="login-form">
        <div class="form-group">
            <label for="phone">手机号</label>
            <input type="tel" id="phone" name="phone" placeholder="请输入手机号">
        </div>
        <div class="form-group">
            <label for="phone-code">验证码</label>
            <div class="code-group">
                <input type="text" id="phone-code" name="phone-code" placeholder="请输入验证码">
                <button type="button" id="send-phone-code" onclick="sendPhoneCode()">获取验证码</button>
            </div>
        </div>
        <button type="button" class="login-button" onclick="phoneLogin()">登录</button>
        <div id="phone-error" class="error-message"></div>
    </form>
</div>

<script type="text/javascript">
    $(function (){
        //给整个浏览器窗口添加键盘按下事件
        $(window).keydown(function (e) {
            //如果按下的是回车键，则发生登录按钮点击事件
            if (e.keyCode == 13) {
                $("#Login").click();
            }
        })
    });
</script>

<script>
    // 切换登录方式
    document.querySelectorAll('.login-tab').forEach(tab => {
        tab.addEventListener('click', function() {
            // 更新标签页样式
            document.querySelectorAll('.login-tab').forEach(t => t.classList.remove('active'));
            this.classList.add('active');

            // 显示对应的表单
            const tabName = this.getAttribute('data-tab');
            document.querySelectorAll('.login-form').forEach(form => form.classList.remove('active'));
            document.getElementById(tabName + '-form').classList.add('active');

            // 清空错误信息
            document.querySelectorAll('.error-message').forEach(msg => {
                msg.style.display = 'none';
                msg.textContent = '';
            });
        });
    });

    // 账号密码登录
    function accountLogin() {
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const isRemPwd = $("#isRemPwd").prop("checked");
        const errorElement = document.getElementById('account-error');

        if (!username || !password) {
            errorElement.textContent = '请输入账号和密码';
            errorElement.style.display = 'block';
            return;
        }

        //ajax请求获取登录信息
            $.ajax({
                url:'settings/qx/user/login.do',
                data:{
                    loginAct:username,
                    loginPwd:password,
                    isRemPwd:isRemPwd,
                },
                type:'post',
                dataType:'json',
                success: function (data) {
                    console.log(data);
                    if (data.code == "1") {
                        //跳转到业务主页面
                        window.location.href = "workbench/index.do";
                    } else {
                        //提示信息
                        $("#msg").html(data.message);
                    }
                },
                /*	当Ajax向后台发送请求之前，会自动执行本函数
					该函数的返回值可以决定ajax是否真正向后台发送请求
					返回true---发送，返回false---不发送
				 */
                beforeSend: function () {
                    $("#msg1").html("正在努力验证中...");
                    return true;
                }
            });
            $.ajax({
                // ... 其他配置项 ...
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error("Error occurred:", textStatus, errorThrown);
                    $("#msg1").html("登录失败，请稍后再试。");
                }
            });
    }


    // 邮箱验证码登录
    function emailLogin() {
        const email = document.getElementById('email').value;
        const code = document.getElementById('email-code').value;
        const errorElement = document.getElementById('email-error');

        if (!email || !code) {
            errorElement.textContent = '请输入邮箱和验证码';
            errorElement.style.display = 'block';
            return;
        }

        $.ajax({
            url:'loginByEmail',
            data:{
                email:email,
                _authCode:code,
            },
            type:'post',
            dataType:'json',
            success: function (data) {
                console.log(data);
                if (data.code == "1") {
                    //跳转到业务主页面
                    $("#msg").html(data.message);
                    window.location.href = "workbench/index.do";
                } else {
                    //提示信息
                    $("#msg").html(data.message);
                }
            },
            /*	当Ajax向后台发送请求之前，会自动执行本函数
                该函数的返回值可以决定ajax是否真正向后台发送请求
                返回true---发送，返回false---不发送
             */
            beforeSend: function () {
                $("#msg").html("正在努力验证中...");
                return true;
            }
        });

    }



    // 发送短信验证码
    // 发送短信验证码
    function sendPhoneCode() {
        const phone = $('#phone').val();
        const sendBtn = $('#send-phone-code');
        const errorDiv = $('#phone-error');

        // 验证手机号格式
        if (!/^1[3-9]\d{9}$/.test(phone)) {
            errorDiv.text('请输入正确的手机号').show();
            return;
        }

        // 禁用按钮，防止重复点击
        sendBtn.prop('disabled', true);
        sendBtn.text('发送中...');

        // 发送AJAX请求
        $.ajax({
            url: '${pageContext.request.contextPath}/sendCode',
            type: 'POST',
            dataType: 'json',
            data: { phone: phone },
            success: function(data) {
                if (data.code == "1") {
                    errorDiv.hide();
                    sendBtn.text('已发送');
                    startCountdown(60, sendBtn); // 开始60秒倒计时
                } else {
                    errorDiv.text(data.message).show();
                    sendBtn.prop('disabled', false);
                    sendBtn.text('获取验证码'); // 恢复按钮文本
                }
            },
            error: function(xhr) {
                let errorMsg = '网络错误，请重试';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }
                errorDiv.text(errorMsg).show();
                sendBtn.prop('disabled', false);
                sendBtn.text('获取验证码'); // 恢复按钮文本
            }
        });
    }

    <%--function sendPhoneCode() {--%>
    <%--    const phone = $('#phone').val();--%>
    <%--    const sendBtn = $('#send-phone-code');--%>
    <%--    const errorDiv = $('#phone-error');--%>

    <%--    // 验证手机号格式--%>
    <%--    if (!/^1[3-9]\d{9}$/.test(phone)) {--%>
    <%--        errorDiv.text('请输入正确的手机号').show();--%>
    <%--        return;--%>
    <%--    }--%>

    <%--    // 禁用按钮，防止重复点击--%>
    <%--    sendBtn.prop('disabled', true);--%>

    <%--    // 发送AJAX请求--%>
    <%--    $.ajax({--%>
    <%--        url: '${pageContext.request.contextPath}/sendCode',--%>
    <%--        type: 'POST',--%>
    <%--        dataType: 'json',--%>
    <%--        data: { phone: phone },--%>
    <%--        success: function(data) {--%>
    <%--            if (data.code == "1") {--%>
    <%--                errorDiv.hide();--%>
    <%--                startCountdown(60); // 开始60秒倒计时--%>
    <%--            } else {--%>
    <%--                errorDiv.text(data.message).show();--%>
    <%--                sendBtn.prop('disabled', false);--%>
    <%--            }--%>
    <%--        },--%>
    <%--        error: function(xhr) {--%>
    <%--            let errorMsg = '网络错误，请重试';--%>
    <%--            if (xhr.responseJSON && xhr.responseJSON.message) {--%>
    <%--                errorMsg = xhr.responseJSON.message;--%>
    <%--            }--%>
    <%--            errorDiv.text(errorMsg).show();--%>
    <%--            sendBtn.prop('disabled', false);--%>
    <%--        }--%>
    <%--    });--%>
    <%--}--%>

    // 短信登录
    function phoneLogin() {
        const phone = $('#phone').val();
        const code = $('#phone-code').val();
        const errorDiv = $('#phone-error');

        // 简单验证
        if (!phone || !code) {
            errorDiv.text('请输入手机号和验证码').show();
            return;
        }

        // 发送登录请求
        $.ajax({
            url: '${pageContext.request.contextPath}/loginByPhone',
            type: 'POST',
            dataType: 'json',
            data: {
                phone: phone,
                code: code
            },
            success: function(data) {
                if (data.code == "1") {
                    // 登录成功，跳转到首页
                    window.location.href = 'workbench/index.do';
                } else {
                    errorDiv.text(data.message).show();
                }
            },
            error: function(xhr) {
                let errorMsg = '网络错误，请重试';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }
                errorDiv.text(errorMsg).show();
            }
        });
    }





    // 倒计时功能
    // function startCountdown(seconds) {
    //     const sendBtn = $('#send-phone-code');
    //     let remaining = seconds;
    //
    //     sendBtn.text(remaining + '秒后重试');
    //
    //     const timer = setInterval(function() {
    //         remaining--;
    //         sendBtn.text(remaining + '秒后重试');
    //
    //         if (remaining <= 0) {
    //             clearInterval(timer);
    //             sendBtn.text('获取验证码').prop('disabled', false);
    //         }
    //     }, 1000);
    // }


    // 倒计时功能 (优化版)
    function startCountdown(seconds, button) {
        let remaining = seconds;

        // 更新按钮状态和文本
        button.prop('disabled', true);
        button.text(remaining + '秒后重试');

        // 设置定时器
        const timer = setInterval(function() {
            remaining--;

            // 更新按钮文本
            button.text(remaining + '秒后重试');

            // 倒计时结束
            if (remaining <= 0) {
                clearInterval(timer);
                button.prop('disabled', false);
                button.text('获取验证码');

                // 移除定时器引用
                button.data('countdown-timer', null);
            }
        }, 1000);

        // 将定时器存储在按钮数据中，以便需要时可以取消
        button.data('countdown-timer', timer);
    }

    $(document).ready(function() {
        // 检查是否有未完成的倒计时（需要后端支持）
        checkRemainingCountdown();
    });


    /**
     * 检查剩余倒计时
     * 该函数用于检查是否存在未过期的验证码发送记录，并根据剩余时间启动倒计时
     */
    function checkRemainingCountdown() {
        // 这里可以通过cookie或后端接口获取剩余时间
        // 示例：假设后端返回剩余秒数
        $.get('${pageContext.request.contextPath}/checkCodeStatus', function(data) {
            // 如果存在剩余秒数，则启动倒计时
            if (data.remainingSeconds > 0) {
                const sendBtn = $('#send-phone-code');
                startCountdown(data.remainingSeconds, sendBtn);
            }
        });
    }


    // 发送邮件验证码
    function sendEmailCode(email) {
        // 使用 AJAX 发送请求到服务器
        return $.ajax({
            url: 'sendEmail',
            data: {email: email},
            type: 'post',
            dataType: 'json'
        });
    }

    // 验证码发送倒计时
    function startCountdown(button, seconds) {
        let remaining = seconds;
        button.textContent = `${remaining}秒后重新获取`;
        const timer = setInterval(() => {
            remaining--;
            if (seconds >= 0) {
                button.textContent = `${remaining}秒后重新获取`;
            }
            if (remaining <= 0) {
                clearInterval(timer);
                button.textContent = '获取验证码';
                button.disabled = false;
            }
        }, 1000);
    }

    //发送邮箱验证码和倒计时一块执行
    function handleSendEmailCode(button, countdownSeconds) {
        const email = document.querySelector('#email').value; // 假设有一个输入框用于输入邮箱地址
        // const email1 = document.getElementById('email').value;
        const button1 = document.getElementById('send-email-code');
        const errorElement = document.getElementById('email-error');
        if (!email) {
            errorElement.textContent = '请输入邮箱地址';
            errorElement.style.display = 'block';
            return;
        }

        if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email)) {
            errorElement.textContent = '邮箱格式不正确';
            errorElement.style.display = 'block';
            return;
        }
        // 禁用按钮，防止重复点击
        button1.disabled = true;
        errorElement.style.display = 'none';
        sendEmailCode(email).done(function(data) {
            if (data.code == "1") {
                // alert("验证码发送成功");
                alert(data.message);
                // $("#msg").html(data.message);
                startCountdown(button, countdownSeconds); // 开始倒计时
            } else {
                //提示信息
                alert(data.message);
            }
        })
    }

</script>

</body>
</html>